<template>
  <div class="lcds-root-container">
    <div class="lc-list-view">
      <lc-rower class="lc-list-view__title" style="align-items: center">
        <lc-svg-icon
          class="lc-svg-icon"
          icon-class="list-view-line"
          style="color: #1d70f5; margin-right: 12px"
        ></lc-svg-icon>
        <span class="lc-label" style="--font-size: 16px"> 筛选结果 </span>
      </lc-rower>
      <ListFilter
        v-show="filterVisible"
        ref="filterRef"
        @search="handleSearchListView"
      /><lc-block :columns="2" class="lc-list-view__toolbar">
        <lc-rower
          style="
            align-items: center;
            --width: 20%;
            flex-basis: calc(20% - 10px);
          "
        >
          <lc-svg-icon
            class="lc-svg-icon"
            icon-class="list-view-line"
            style="color: #1d70f5; margin-right: 12px"
          ></lc-svg-icon>
          <span class="lc-label" style="--font-size: 16px; --fontSizeValue: 16">
            查询结果
          </span>
        </lc-rower>

        <lc-rower
          class="lc-list-view__toolbar-tools"
          style="
            justify-content: flex-end;
            --width: 80%;
            flex-basis: calc(80% - 10px);
          "
        >
          <el-button class="lc-button" type="primary">
            <lc-svg-icon
              class="lc-svg-icon"
              icon-class="materials_plus"
            ></lc-svg-icon>

            新增
          </el-button>
          <lc-table-column-filter v-model="tableColumns" selectedKey="showFlag">
            <el-button class="lc-button" type="primary">
              更多显示列···
            </el-button>
          </lc-table-column-filter>
        </lc-rower>
      </lc-block>
      <el-table
        ref="tableRef"
        class="lc-table"
        :data="tableData"
        :row-key="tableRowKey"
        :stripe="false"
      >
        <template v-for="(col, index) in tableColumns">
          <el-table-column
            v-if="col.showFlag"
            :key="col.prop + '_' + index"
            :prop="col.prop"
            :label="col.label"
            v-bind="col.attrs"
          >
          </el-table-column>
        </template>
      </el-table>
      <lc-pagination
        ref="pagerRef"
        :background="true"
        @current-change="handleCurrentPageChange"
        @size-change="handlePageSizeChange"
      ></lc-pagination>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, unref } from "vue";

import ListFilter from "./components/listFilter/index.vue";
import { request } from "@/apis/request";
import useListView from "@hooks/uwdp/list-view";
defineOptions({
  name: "ListView",
});

const tableRef = ref(null);
const tableData = ref([]);
const tableColumns = ref([
  { label: "列1", prop: "col1", showFlag: true, attrs: {} },
  { label: "列2", prop: "col2", showFlag: true, attrs: {} },
]);
const tableRowKey = ref("id");
const pagerRef = ref(null);
const filterRef = ref(null);
const {
  filterData,
  filterVisible,
  deleteItemOfListView,
  setQueryMethod,
  setPageOptions,
  handleSearchListView,
  handleCurrentPageChange,
  handlePageSizeChange,
  handleToggleFilterOfListView,
  resetListView,
} = useListView(filterRef, true);

const queryTableData = async () => {
  let params = {
    url: "",
    method: "get",
    params: {
      ...unref(filterData),
      pageIndex: pagerRef.value.pageOptions.pageIndex,
      pageSize: pagerRef.value.pageOptions.pageSize,
    },
  };
  const res = await request(params);
  if (res) {
    tableData.value = res?.data?.data || [];

    const { totalCount: total = 0 } = res?.data || {};
    pagerRef.value.pageOptions.total = total;
  }
};

onMounted(() => {
  queryTableData();
  setPageOptions(pagerRef.value.pageOptions);
  setQueryMethod(queryTableData);
});
</script>
